<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2650698_5xqmblfcp1m.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/cart.css">
    <script src="../js/common.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/api.js"></script>
</head>

<body>
    <div class="cart-header">
        <div class="header">
            <div class="logo">
                <a href="../html/index.html">
                    <img src="../img/logo-en.png" alt="">
                </a>
            </div>
            <div class="head-right">
                <span>Hi~</span>
                <ul>
                    <li id="loginBox">
                        [
                        <a href="./login.html?returnCart=./cart.html" id="login">请登录</a>
                        ][
                        <a href="./register.html" id="reg">免费注册</a>
                        ]
                    </li>
                    <li>
                        <a href="#">MY有货</a>
                    </li>
                    <li>
                        <span class="iconfont icon-dingdan"></span>
                        <a href="#">我的订单</a>
                    </li>
                    <li>
                        <span class="iconfont icon-kefu"></span>
                        <a href="#">客服服务</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="shop-cart">
        <div class="cart-content">
            <div class="cart-title">
                <div class="title-img">

                </div>
                <ul>
                    <li>查看购物车</li>
                    <li>填写订单</li>
                    <li>付款完成购买</li>
                </ul>
            </div>
            <div class="cart-tips">
                <div class="tipsbox">
                    <strong>温馨提示：</strong>亲爱的顾客，您还没有 <a href="./login.html?returnCart=./cart.html">登录</a>
                    哦，所有商品价格、活动信息以登录后显示为准.
                </div>
                <a href="javascript:void(0);" class="btn-close" title="关闭">×</a>
            </div>

            <div id="cartList">
                <div class="cart-wrap">
                    <div class="cart-empty">
                        <i class="iconfont icon-tianchongxing-"></i>
                        <p>购物车空空的哦，去看看心仪的商品吧~</p>
                        <a href="./goodsList.html" class="shop">去购物</a>
                    </div>
                    <div class="order-pay">
                        <div class="pay-wrap">
                            <div class="pay-title">
                                <p class="left" style="width:6%;">
                                    <input type="checkbox" name="checkAll" class="checkAll">
                                </p>
                                <p style="width:35%">商品信息</p>
                                <p style="width:14%">单价</p>
                                <p style="width:15%;">数量</p>
                                <p style="width:16%;">小计</p>
                                <p class="right" style="width:11.8%;">操作</p>
                            </div>

                            <div class="cart-table">

                                <ul class="table clear">
                                    <!-- <li class="table-item">
                                        <div class="checkOne-all">
                                            <input type="checkbox" class="checkOne">
                                        </div>
                                        <div class="goodsMsg">
                                            <a class="goodsImg" href="//www.yohobuy.com/product/52297968.html">
                                                <img
                                                    src="//img12.static.yhbimg.com/goodsimg/2021/05/25/15/02123c82a4e7fae95c5201d22943b09506.jpg?imageMogr2/thumbnail/64x88/background/d2hpdGU=/positioncenterquality/90">

                                            </a>
                                            <p class="goodsName">
                                                <a href="//www.yohobuy.com/product/52297968.html">
                                                    THETHING 咕咕刺客短袖T恤
                                                </a>
                                            </p>
                                        </div>
                                        <div class="goodsPrice">
                                            ¥99.00
                                        </div>
                                        <div class="buyNum">
                                            <span class="reduce">-</span>
                                            <input type="text" value="1" class="count">
                                            <span class="add">+</span>
                                        </div>
                                        <div class="sub-total">
                                            ¥99.00
                                        </div>
                                        <div class="cart-operation">
                                            <span class="del">删除</span>
                                        </div>
                                    </li> -->
                                </ul>

                            </div>

                            <div class="cart-footer">
                                <div class="fixed-option">
                                    <a class="delAll" href="javascript:;">删除选中商品</a>
                                </div>
                                <p class="select-num">已选商品<strong class="ins">0</strong>件</p>
                                <div class="price-sum">
                                    <p class="sum">应付金额（不含邮费）：<strong>￥0.00</strong></p>
                                </div>
                                <a href="javascript:;" id="SubmitBtn">去结算</a>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

            <div class="bottom-tab">
                <span class="bottom1 bot-active">为您优选</span>
                <span class="bottom2">最近浏览</span>
                <span class="change">换一批</span>
            </div>

            <div class="rec-goods">
                <ul>
                    <li>
                        <img src="../img/rec5.jpg" alt="">
                        <p>#Boring Things 晴雨两用黑胶伞</p>
                        <span>¥199.00</span>
                        <button>加入购物车</button>
                    </li>
                    <li>
                        <img src="../img/rec1.jpg" alt="">
                        <p>BABYGHOST 抽绳露背丝光T恤</p>
                        <span>¥99.00</span>
                        <button>加入购物车</button>
                    </li>
                    <li>
                        <img src="../img/rec3.jpg" alt="">
                        <p>Life·After Life 撞色拼接连帽夹克</p>
                        <span>¥219.00</span>
                        <button>加入购物车</button>
                    </li>
                    <li>
                        <img src="../img/rec2.jpg" alt="">
                        <p>BOY LONDON LOGO图案印花短袖T恤</p>
                        <span>¥579.00</span>
                        <button>加入购物车</button>
                    </li>
                    <li>
                        <img src="../img/rec4.jpg" alt="">
                        <p>THETHING 城际线短袖衬衫</p>
                        <span>¥249.00</span>
                        <button>加入购物车</button>
                    </li>
                </ul>

            </div>

        </div>
    </div>

    <div class="yoho-footer">
        <div class="promise">
            <ul>
                <li>
                    <span class="iconfont icon-iconzhengpin"></span>
                    <span class=" red">100%</span>
                    <span class="rgbf">品牌正品</span>
                </li>
                <li>
                    <span class="icon-qitianwuliyoutuihuan iconfont"></span>
                    <span class=" red">7天</span>
                    <span class="rgbf">无理由退换货</span>
                </li>
                <li>
                    <span class="icon-liaotian iconfont"></span>
                    <a href="#">
                        <span class="red">便捷</span>
                        <span class="rgbf">在线客服</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="footer-help">
            <ul>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>

            </ul>
        </div>

        <div class="footer-link">
            <div class="link-left">
                <a href="#">
                    <img src="../img/link1.png" alt="">
                </a>
                <a href="#">
                    <img src="../img/link2.png" alt="">
                </a>
                <a href="#">
                    <img src="../img/link3.png" alt="">
                </a>

            </div>
            <p class="links">
                <a href="#" rel="nofollow">返回首页</a>
                <span>|</span>
                <a href="#" rel="nofollow">YOHO!BUY 有货</a>
                <span>|</span>
                <a href="#" rel="nofollow">新力传媒</a>
                <span>|</span>
                <a href="#" rel="nofollow">联系我们</a>
                <span>|</span>
                <a href="#" rel="nofollow">商家入驻</a>
                <span>|</span>
                <a href="#" rel="nofollow">隐私条款</a>
                <span>|</span>
                <a href="#" rel="nofollow">友情链接</a>
                <span>|</span>
                <a href="#">潮流品牌大全</a>
                <span>|</span>
                <a href="#">潮流品类大全</a>
                <span>|</span>
                <a href="#">潮流产品大全</a>
                <span>|</span>
                <a href="#">潮流资讯</a>
                <span>|</span>
                <a href="#">穿衣搭配(男生版)</a>
                <span>|</span>
                <a href="#">穿衣搭配(女生版)</a>
                <span>|</span>
                <a href="#">潮流人气</a>
                <span>|</span>
                <a href="#">潮流潮品</a>
                <span>|</span>
                <a href="#">潮流视频</a>
                <span>|</span>
                <a href="#">苏公网安备 32010502010132号</a>
                <span>|</span>
                <a target="_blank" href="#">出版物经营许可证</a>
                <span>|</span>
                <a target=" _blank" href="#">苏B2-20120395</a>
                <span>|</span>
                <a target=" _blank" href="#">食品经营许可证</a>
            </p>

            <p class="copyright">
                CopyRight © 2007-2021 南京新与力文化传播有限公司
                <a class="rbg6" href="#">苏ICP备09011225号</a>
                NewPower Co. 版权所有 江苏省南京市建邺区嘉陵江东街18号南京国家广告产业园5栋17，18楼 025-87781000
            </p>
        </div>
    </div>

    <div class="returnTop">
        ↑
    </div>

</body>

<script>


    $(function () {

        var lgc = getCookie("lgc");

        if (lgc) {
            $("#loginBox").html(`${lgc}<button class="quitBtn">退出</button>`).css("color", "red");
            $(".tipsbox").html(`<strong>温馨提示：</strong>1. 选购单中的商品不保留库存，请及时结算。 2. 商品的价格、相关活动信息及库存以订单提交时为准。
                `)
        }

        $(".icon-tianchongxing-").css({ cursor: "pointer" }).click(function () {
            location.href = "./cart.html";
        })

        $(".quitBtn").click(function () {
            quit();
        })
        function quit() {
            setCookie("lgc", "", -1);
            location.reload();
        }

        $(".btn-close").click(function () {
            $(".tipsbox").css({ display: "none" });
            $(this).css({ display: "none" }).parent().css({ background: "#fff" });
        })


        loadCart();
        async function loadCart() {
            var { detail, status, list } = await searchCart({ user: lgc })
            if ($(list).length == 0 || !status) {
                $(".pay-wrap").css({ display: "none" });
                $(".cart-empty").css({ display: "block" });
                return false;
            }
            if (status) {
                var html = "";
                list.forEach(({ id, gId, buyNum, goodsName, goodsImg, goodsPrice }) => {
                    html += ` <li class="table-item" data-id="${id}">
                                    <div class="checkOne-all">
                                        <input type="checkbox" class="checkOne">
                                    </div>
                                    <div class="goodsMsg">
                                        <a class="goodsImg">
                                            <img src="${goodsImg}">
                                        </a>
                                        <p class="goodsName">
                                            <a href="//www.yohobuy.com/product/52297968.html">
                                                ${goodsName}
                                            </a>
                                        </p>
                                    </div>
                                    <div class="goodsPrice">
                                        ¥${goodsPrice}
                                    </div>
                                    <div class="buyNum">
                                        <span class="reduce">-</span>
                                        <input type="text" value="${buyNum}" class="count">
                                        <span class="add">+</span>
                                    </div>
                                    <div class="sub-total">
                                        ¥${(goodsPrice * buyNum).toFixed(2)}
                                    </div>
                                    <div class="cart-operation">
                                        <span class="del">删除</span>
                                    </div>
                                </li>`;
                })
                $(".table").html(html);
            }
        }

        //全选
        $(".cart-wrap").delegate(".checkAll", "click", function () {
            var status = $(this).prop("checked");
            $(".checkOne").prop("checked", status);
            Pricetotal();
        })
        //反选
        $(".cart-wrap").delegate(".checkOne", "click", function () {
            isCheckAll();
            Pricetotal();
        })
        //加号
        $(".cart-wrap").delegate(".add", "click", async function () {
            var type = 1;
            var id = $(this).parents("li").attr("data-id");
            var { status, detail } = await updateCart({ id, type })
            if (status) {
                var num = $(this).prev().val() * 1 + 1;
                var price = $(this).prev().prev().text("-").css({ cursor: "pointer" }).parents(".table-item").find(".goodsPrice").text().trim().substring(1) * 1;
                $(this).prev().val(num).parents(".table-item").find(".sub-total").text("￥" + (price * num).toFixed(2))
                Pricetotal();
            }
        })
        //减号
        $(".cart-wrap").delegate(".reduce", "click", async function () {
            var num = $(this).next().val() * 1 - 1;
            if ($(this).next().val() <= 1) {
                $(this).text("").css({ cursor: "no-drop" });
                return false;
            }
            var type = 0;
            var id = $(this).parents("li").attr("data-id");
            var { status, detail } = await updateCart({ id, type })
            if (status) {
                var price = $(this).parents(".table-item").find(".goodsPrice").text().trim().substring(1) * 1;
                $(this).next().val(num).parents(".table-item").find(".sub-total").text("￥" + (price * num).toFixed(2))
            }
            num <= 1 ? $(this).text("").css({ cursor: "no-drop" }) : 0;
            Pricetotal();
        })


        //单删
        $(".cart-wrap").delegate(".del", "click", async function () {
            if (confirm("是否确定删除这件商品？")) {
                var id = $(this).parents("li").attr("data-id");
                var { detail, status } = await deleteCart({ id });
                if (status) {
                    $(this).parents("li").remove();
                    Pricetotal();
                    isCheckAll();
                    if ($(".table li").length == 0) {
                        loadCart();
                    }
                }
            }
        })
        //全删
        $(".cart-wrap").delegate(".delAll", "click", function () {
            if (confirm("是否确定删除这些商品？")) {
                $(".checkOne:checked").each(async function () {
                    var id = $(this).parents("li").attr("data-id");
                    var { detail, status } = await deleteCart({ id });
                    if (status) {
                        $(this).parents("li").remove();
                        Pricetotal();
                        isCheckAll();
                    }
                    loadCart();
                });
            }
        })
        //用户输入
        $(".cart-wrap").delegate(".count", "blur", function () {
            var reg = /^[0-9]+$/;
            if ($(this).val() <= 0 || !(reg.test($(this).val())) || $(this).val() > 99) {
                alert("商品数量最少为1,最大为99");
                if ($(this).val() <= 0) $(this).val(1);
                if ($(this).val() > 99) $(this).val(99);
            }
            var price = $(this).parent().prev().text().trim().substring(1) * 1 * $(this).val();
            $(this).parent().next().text("￥" + price.toFixed(2));
            Pricetotal();
        })
        //合计
        function Pricetotal() {
            var total = 0;
            var sum = 0;
            $(".checkOne").filter(":checked").each(function () {
                total += $(this).parents("li").find(".sub-total").text().trim().substring(1) * 1;
                sum += $(this).parents("li").find(".count").val() * 1;
            });
            $(".sum strong").text("￥" + (total.toFixed(2)));
            $(".ins").text(sum);
        }
        //是否全选
        function isCheckAll() {
            var flag = $(".checkOne").is(":not(:checked)");
            $(".checkAll").prop("checked", $(".checkOne").length > 0 ? !flag : false);
        }


        $(window).scroll(function () {

            $(".returnTop").css("display", "block").click(function () {
                window.scrollTo({
                    top: 0,
                    behavior: "smooth"
                })
            })
            if (window.scrollY <= 0) {
                $(".returnTop").css("display", "none")
            }
        })

	//组员b修改的

    });



</script>

</html>